import React, { useEffect, useState } from 'react'
import { Swiper, Image, Input } from 'antd-mobile'
import { useHistory } from 'react-router-dom';
import { getImg, getList } from './api';
import { TravelOutline } from 'antd-mobile-icons'
import './css.less'
export default function MetroPage() {
    const [list, setList] = useState([])
    const [list2, setList2] = useState([])
    const history = useHistory()
    const getSwiper = async () => {
        const data = await getImg()
        // console.log(data.data.rows);
        setList(data.data.rows)
    }


    const getL = async () => {
        const data = await getList()
        console.log(data.data.data);
        setList2(data.data.data)
    }
    const toMap = () => {
        history.push('/metro_query/index/map')
    }
    const toDetail = (id: any) => {
        history.push('/metro_query/index/detail/' + id)
    }
    const search = (value: any) => {
        history.push('/metro_query/index/road/' + value)
    }
    useEffect(() => {
        getSwiper()
        getL()
    }, [])
    if (list.length > 0) {
        return (
            <div>
                <Swiper>
                    {list.map((item: any, index: any) => {
                        return <Swiper.Item key={index}>
                            <Image src={"http://124.93.196.45:10001/" + item.advImg}></Image>
                        </Swiper.Item>
                    })}
                </Swiper>
                <div>
                    <a onClick={toMap} className='a-z'>查询总览图</a>
                </div>
                <Input className='inp-z' onEnterPress={(e: any) => { search(e.target.value) }} placeholder='输入站点名称搜索' clearable />
                {list2.map((item: any, index: any) => {
                    return <div onClick={() => { toDetail(item.lineId) }} key={item.lineId} className='list-z'>
                        <TravelOutline fontSize={60} /><span><h2>{item.lineName}</h2></span>
                    </div>
                })}
            </div>
        )
    } else {
        return <div></div>
    }
}
